<template>
  <div class="wxEditLite2">
    <ul class="types">
      <li :class="{select: this.selected == 'text'}" @click="handleChangeType('text')" v-if="showText">
        <i class="icon icon-text"></i>文字
      </li>
      <li :class="{select: this.selected == 'news'}" @click="handleChangeType('news')" v-if="showNews">
        <i class="icon icon-tuwen"></i>图文消息
      </li>
      <li :class="{select: this.selected == 'image'}" @click="handleChangeType('image')"><i class="icon icon-tupian"></i>图片</li>
      <li :class="{select: this.selected == 'voice'}" @click="handleChangeType('voice')"><i class="icon icon-yuyin"></i>音频</li>
      <li :class="{select: this.selected == 'video'}" @click="handleChangeType('video')"><i class="icon icon-shipin"></i>视频</li>
    </ul>
    <div class="content">
      <div v-if="selected=='image' && datas[selected].url" class="image">
        <img :src="datas[selected].url" alt="">
        <el-button type="text" class="del" @click="handleDel">删除</el-button>
      </div>
      <div v-else-if="selected=='voice' && datas[selected].url" class="audio">
        <div class="audio-box">
          <img src="../../../assets/audio.png" alt="">
          <div class="detail">
            <h4 class="tit">{{datas[selected].name}}</h4>
            <p>{{formatTime(datas[selected].time)}}</p>
          </div>
        </div>
        <el-button type="text" class="del" @click="handleDel">删除</el-button>
      </div>
      <div v-else-if="selected=='video' && datas[selected].url" class="audio">
        <div class="video-box">
          <h4 class="title">{{datas[selected].name}}</h4>
          <div class="createTime">{{datas[selected].createTime}}</div>
          <img :src="datas[selected].url" alt="">
          <div>时长：{{formatTime(datas[selected].time)}}</div>
        </div>
        <el-button type="text" class="del" @click="handleDel">删除</el-button>
      </div>
      <div v-else-if="selected==='news' && datas[selected].newsList">
        <div class="newsBox">
          <div class="firstNews">
            <h4 class="title">{{datas[selected].newsList[0].title}}</h4>
            <img :src="baseUrl + '/content/source/id/' + datas[selected].newsList[0].sourceId" alt="">
          </div>
          <div v-if="n!=0" v-for="item,n in datas[selected].newsList" class="subNews">
            <img :src="baseUrl + '/content/source/id/' + item.sourceId" alt="">
            <h4 class="title">{{item.title}}</h4>
          </div>
        </div>
        <el-button type="text" class="del" @click="handleDel">删除</el-button>
      </div>
      <div v-else-if="this.selected != 'text'" class="select_area">
        <a class="btn btn-select" @click="handleSelect">
          <i class="icon icon-jiahao"></i>
          <div v-if="this.selected == 'news'">选择已有图文</div>
          <div v-else>从素材库中选择</div>
        </a>
        <a class="btn btn-add" @click="handleAddNew">
          <i class="icon icon-jiahao"></i>
          <div>新建</div>
        </a>
      </div>
      <edit-div ref="editDiv" v-show="selected==='text'" :html="datas.text.content" @change="$emit('change')"></edit-div>
    </div>
    <!-- 选择图文 -->
    <el-dialog :visible.sync="visible1" title="选择图文" @open="$refs.dialog_news&&($refs.dialog_news.selected={})">
      <dialog-news ref="dialog_news"></dialog-news>
      <div slot="footer">
        <el-button type="primary" @click="handleSelectNews" :loading="loading">确定</el-button>
        <el-button @click="visible1=false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 选择图片 -->
    <el-dialog ref="dialog" title="选择图片" :visible.sync="visible2" @open="SELECT_SOURCE({})">
      <dialog-image></dialog-image>
      <div slot="footer">
        <el-button type="primary" @click="handleSelectSource" :loading="loading">确定</el-button>
        <el-button @click="visible2=false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 选择音频 -->
    <el-dialog ref="dialog" title="选择音频" :visible.sync="visible3" @open="SELECT_SOURCE({})">
      <dialog-audio></dialog-audio>
      <div slot="footer">
        <el-button type="primary" @click="handleSelectSource" :loading="loading">确定</el-button>
        <el-button @click="visible3=false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 选择视频 -->
    <el-dialog ref="dialog" title="选择视频" :visible.sync="visible4" @open="SELECT_SOURCE({})">
      <dialog-video></dialog-video>
      <div slot="footer">
        <el-button type="primary" @click="handleSelectSource" :loading="loading">确定</el-button>
        <el-button @click="visible4=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState, mapMutations, mapActions} from 'vuex'
  import dialogImage from '@/components/common/content/dialogImage'
  import dialogAudio from '@/components/common/content/dialogAudio'
  import dialogVideo from '@/components/common/content/dialogVideo'
  import dialogNews from '@/components/common/content/dialogNews'
  import config from '@/config/env'
  import editDiv from '@/components/common/content/editDiv'
  export default {
    components: {dialogImage, dialogAudio, dialogVideo, dialogNews, editDiv},
    props: {
      'showText': {
        type: Boolean,
        default: true
      },
      'showNews': {
        type: Boolean,
        default: true
      },
      'editorData': {
        type: Object,
        default: () => {
          return {
            msgType: 'text',
            content: '',
            mediaid: ''
          }
        }
      }
    },
    data () {
      return {
        // datas: this.editorData,
        datas: {
          text: {},
          image: {},
          voice: {},
          video: {},
          news: {}
        },
        selected: this.editorData.msgType,
        visible1: false,
        visible2: false,
        visible3: false,
        visible4: false,
        loading: false
      }
    },
    mounted () {
      this.datas[this.editorData.msgType] = this.editorData
    },
    watch: {
      editorData (obj) {
        this.datas[obj.msgType] = obj
        this.selected = obj.msgType
      },
      getContent () {
        this.$emit('change')
      }
    },
    computed: {
      ...mapState({
        content: state => state.sourceManage.selected,
        sourceInfo: state => state.sourceManage.sourceInfo
      }),
      baseUrl () {
        return config.baseUrl
      },
      // 获取编辑器内容
      getContent () {
        return this.datas[this.selected]
      }
    },
    methods: {
      ...mapMutations(['SET_SOURCE_INFO', 'UPDATE_SOURCE_INFO', 'SELECT_SOURCE']),
      ...mapActions(['getSourceInfo', 'getWxNewsMediaid']),
      // 选择内容
      handleSelect () {
        if (this.selected === 'image') {
          this.visible2 = true
        } else if (this.selected === 'voice') {
          this.visible3 = true
        } else if (this.selected === 'video') {
          this.visible4 = true
        } else if (this.selected === 'news') {
          this.visible1 = true
        }
      },
      // 删除内容
      handleDel () {
        this.datas[this.selected] = {msgType: this.datas[this.selected].msgType}
      },
      // 选中内容
      async handleSelectSource () {
        if (!this.content.id) {
          this.$message.warning('请选择素材')
          return false
        }
        this.loading = true
        const res = await this.getSourceInfo({appid: this.$route.params.appid, sourceid: this.content.id})
        this.loading = false
        if (res.data.code === 1) {
          this.visible2 = this.visible3 = this.visible4 = this.loading = false
        }
        this.datas[this.selected] = Object.assign({}, this.datas[this.selected], this.sourceInfo)
      },
      // 选中图文
      async handleSelectNews () {
        this.loading = true
        const res = await this.getWxNewsMediaid({appid: this.$route.params.appid, logicId: this.$refs.dialog_news.selected.id})
        this.loading = false
        if (res.data.code === 1) {
          this.visible1 = false
          this.datas[this.selected] = Object.assign({}, this.datas[this.selected], this.$refs.dialog_news.selected, {mediaid: res.data.data})
        }
      },
      // 选择内容类型
      handleChangeType (type) {
        this.selected = type
        this.datas[this.selected].msgType = type
      },
      // 新建
      handleAddNew () {
        if (this.selected === 'news') {
          this.$router.push({
            name: 'EditWxContent',
            params: {
              id: 'new'
            }
          })
        } else if (this.selected === 'image') {
          this.$router.push({
            name: 'ContentSource',
            params: {
              type: 'image'
            }
          })
        } else if (this.selected === 'voice') {
          this.$router.push({
            name: 'ContentSource',
            params: {
              type: 'audio'
            }
          })
        } else if (this.selected === 'video') {
          this.$router.push({
            name: 'ContentSource',
            params: {
              type: 'video'
            }
          })
        }
      },
      // 清空内容
      clear () {
        this.datas = {
          text: {},
          image: {},
          voice: {},
          video: {},
          news: {}
        }
        this.selected = 'news'
      },
      formatTime (time) {
        return this.$_.padStart(Math.floor(time / 60).toString(), 2, 0) + ':' + this.$_.padStart((time % 60).toString(), 2, 0)
      }
    }
  }
</script>
<style lang="scss">
  .wxEditLite2{
    .types{
      &{display:flex;padding:0 20px;height:38px;line-height:38px;background:#fff;color:#8d8d8d;list-style:none;font-size:14px;border:1px solid #e7e7eb;}
      li{margin-right:30px;cursor:pointer;}
      li.select{color:#222}
    }
    .icon{margin-right:3px;font-size:20px;vertical-align:middle}
    .icon-tupian,.icon-shipin{font-weight:700}
    .content{
      &{margin-top:-1px;padding:15px;border:1px solid #e7e7eb;background:#fff;max-height: 285px;}
      .select_area{margin:0 auto;width:424px;}
      .btn{display:inline-block;margin:0 10px;padding: 40px 0 48px 0;width:185px;border:2px dotted #d9dadc;text-align:center;cursor:pointer;font-size:14px;color:#8d8d8d;}
      .btn:hover{border-color:#B3B3B3}
      .icon{font-size:30px;color:#c3c3c3}
      .image img{width:186px;height:186px;}
      .del{margin:0 0 -5px 12px;vertical-align:bottom;}
      .audio-box{
        &{display:inline-block;padding:10px;width:300px;height:60px;border:1px solid #e7e7eb;vertical-align:top;}
        img{float:left;height:60px;width:60px;}
        .detail{margin-left:80px;}
      }
      .video-box{
        display:inline-block;padding:10px;width:292px;border:1px solid #e7e7eb;vertical-align:top;
        img{width:100%;max-height:210px;}
        .title{font-size:14px;}
      }
      .newsBox{
        &{display:inline-block;padding:5px 10px;width:240px;max-height:245px;overflow-y:auto;border:1px solid #d3dce6;}
        .firstNews img{margin-top:5px;width:240px;height:134px;}
        .subNews{margin-top:5px;text-align:right;overflow:hidden;}
        .subNews img{float:right;width:80px;height:80px;}
        .subNews .title{margin-right:90px;}
        &::-webkit-scrollbar-track-piece{width:10px;background-color:#fff;}
        &::-webkit-scrollbar{width:6px;height:6px;}
        &::-webkit-scrollbar-thumb{height:50px;background:#ccc;cursor:pointer;}
        &::-webkit-scrollbar-thumb:hover{background:#ccc;cursor:pointer}
      }
    }
    .el-dialog{width:900px;}
  }
</style>
